<script>
/**
 * Widget Component
 */
export default {
  data() {
    return {
      statData: [
        {
          title: "信源总数量",
          icon: "ri-stack-line",
          value: "20.3万",
          subvalue: "68.4万",
          text: "种子总数",
        },
        {
          title: "有效信源数",
          icon: "ri-store-2-line",
          value: "11.6万",
          subvalue: "285.6万",
          text: "有效种子",
        },
        {
          title: "失效信源数",
          icon: "ri-briefcase-4-line",
          value: "15.2万",
          subvalue: "75.2万",
          text: "失效种子",
        },
        {
          title: "采集异常信源",
          icon: "ri-archive-drawer-line",
          value: "1.2万",
          subvalue: "5.7万",
          text: "异常种子",
        },
      ],
    };
  },
  methods: {
    screen(data){
      let idx = 1;
      if(data.text=='种子总数'){
        idx = 1;
      }else if(data.text=='有效种子'){
        idx = 2;
      }else if(data.text=='异常种子'){
        idx = 3;
      }else if(data.text=='失效种子'){
        idx = 4;
      }
      this.$emit('screen',idx)
    }
  }
};
</script>

<template>
  <div class="row">
    <div class="col-md-3" v-for="(data, index) in statData" :key="index">
      <div class="card pointer" @click="screen(data)">
        <div class="card-body">
          <div class="media">
            <div class="media-body overflow-hidden">
              <p class="text-truncate font-size-14 mb-2">{{ data.title }}</p>
              <h4 class="mb-0">{{ data.value }}</h4>
            </div>
            <div class="text-primary">
              <i :class="`${data.icon} font-size-24`"></i>
            </div>
          </div>
        </div>

        <div class="card-body border-top py-3">
          <div class="text-truncate">
            <span class="badge badge-soft-success font-size-11">
              <!-- <i class="mdi mdi-menu-up"></i> -->
              {{ data.subvalue }}
            </span>
            <span class="text-muted ml-2">{{ data.text }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="numCount">
        <ul class="clearfix">
            <li>
                <div class="item">
                    <div class="numU"><span class="numCX" data-startVal="0" data-endVal="363567" data-speed="4" data-decimals="0" id="mumC1">0</span></div>
                    <div class="indc">股权代码</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="numU"><span class="numCX" data-startVal="0" data-endVal="2000" data-speed="4" data-decimals="0" id="mumC2">0</span><sub class="unitC">年</sub></div>
                    <div class="indc">成立</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="numU"><span class="numCX" data-startVal="0" data-endVal="940" data-speed="4" data-decimals="0" id="mumC3">0</span><sub class="unitC">(万元)</sub></div>
                    <div class="indc">注册资本</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="numU"><span class="numCX" data-startVal="0" data-endVal="5000" data-speed="4" data-decimals="0" id="mumC4">0</span><sup class="unitC">+</sup></div>
                    <div class="indc">优质客户</div>
                </div>
            </li>
        </ul>
    </div> -->
  </div>
  <!-- end row -->
</template>
<style lang="scss" scoped>
// @import url('/assets/css/style.css');
</style>
